// app/login.tsx

import Loading from '@/components/Loading';
import { login } from '@/utils/request/Api';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { router } from 'expo-router';
import React, { useState } from 'react';
import { Ionicons } from '@expo/vector-icons';
import DateTimePicker from '@react-native-community/datetimepicker';
import Toast from '@/components/Toast';
import {
  Platform,
  Image,
  StyleSheet,
  Text, TextInput, TouchableOpacity,
  View,
  KeyboardAvoidingView,
  TouchableHighlight,
  Alert,
  Button,
  Modal
} from 'react-native';
import { hide } from 'expo-router/build/utils/splash';
export default function LoginScreen() {
  const [account, setAccount] = useState('');
  const [show, setShow] = useState(false);
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [showToast,setShowToast] = useState(false);

  const onLogin = () => {
    
    // 显示 Toast
    setLoading(true)
    login({password:password,account:account}).then(async (res) => {
      setLoading(false)
       if(res.code == 1){ // 登錄成功
          const user = res.data?.userinfo;
          // 保存用戶登錄信息
          await AsyncStorage.setItem('USER-INFO', JSON.stringify(user));
          router.push('/home');
       }else{
        // 失敗
        Alert.alert("Tip",res.msg);
        await AsyncStorage.setItem('USER-INFO', '');
       }
    }).catch((err) => {
      console.log(err)
      setLoading(false);
      Alert.alert("Tip","Login failed, please try again");
    })
  }
  return (
    <KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"}
      style={styles.container}>
      <Image source={require('../../assets/logo.png')} style={styles.logo} />
      <Text style={styles.welcome}>歡迎回來！</Text>
      <Text style={styles.subText}>請登入以繼續您的購物與預約體驗</Text>

      <TextInput
        style={styles.input}
        placeholder="Email 或 手機號碼"
        value={account}
        onChangeText={setAccount}
      />
      <TextInput
        style={styles.input}
        placeholder="密碼"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
     
      <TouchableOpacity >
        <Text onPress={() => router.push('../forgot')} style={styles.forgot}>忘記密碼？</Text>
      </TouchableOpacity>
      
                
      <TouchableOpacity
        style={styles.loginBtn}
        onPress={onLogin}
        disabled={loading}
        // onPress={() => router.push('/home')} // 可以改成你實際的 home 頁面路徑
      >
        <Text style={styles.loginText}>登入</Text>
      </TouchableOpacity>

      {/* <Text style={styles.registerText}>
        還不是會員？ <Text style={{ color: '#007AFF' }}>立即註冊</Text>
      </Text> */}
      {loading && <Loading />}
      
    </KeyboardAvoidingView>
   
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  logo: {
    width: 80,
    height: 80,
    alignSelf: 'center',
    marginBottom: 20,
  },
  welcome: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 10,
  },
  subText: {
    textAlign: 'center',
    color: '#666',
    marginBottom: 30,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 10,
    marginBottom: 15,
  },
  forgot: {
    textAlign: 'right',
    color: '#007AFF',
    marginBottom: 20,
  },
  loginBtn: {
    backgroundColor: '#333',
    paddingVertical: 14,
    borderRadius: 10,
    alignItems: 'center',
  },
  loginText: {
    color: '#fff',
    fontSize: 18,
  },
  registerText: {
    marginTop: 30,
    textAlign: 'center',
    color: '#555',
  },
  okButton: {
    backgroundColor: "#c400e2ff",
    borderRadius: 5,
    padding: 10,
    elevation: 2,
    borderWidth:1,
    borderColor:'#c400e2ff',
    color:'#fff',
    marginLeft:10
  },
  cleanButton:{
    backgroundColor: "#fefefeff",
    borderWidth:1,
    borderColor:'#eee',
    borderRadius: 5,
    padding: 10,
    elevation: 2,
    color:'#000',
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#F194FF",
  },
    inputContainer: {
    flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff',
    borderWidth:1,borderColor:'#ccc',
    borderRadius: 8, paddingHorizontal: 10, marginTop: 16, height: 45
  },
  icon: { marginRight: 6 },
  inputw: { flex: 1, fontSize: 16 },
});
